<template>
	<view class="footer-space">
		<uni-forms :value="formData" ref="form" border :rules="rules" validate-trigger="bind" err-show-type="undertext">
			<uni-section class="pub-title" title="投保人信息" type="line"></uni-section>
			<uni-card class="box-shadow-10 card-pub">
				<uni-forms-item label="姓名" name="name" required>
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" :inputBorder="false" @blur="onBlur"/>
				</uni-forms-item>
				<uni-forms-item label="证件类型">
					<picker id="zhengjlx" @change="bindPickerChange" v-model="formData.zhengjlx" :range="zhengjlx">
						<view class="uni-input">{{zhengjlx[index_zhengjlx]}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="证件号码" required name="zhengjhm">
					<uni-easyinput type="text" v-model="formData.zhengjhm" placeholder="请输入证件号码" :inputBorder="false" @blur="onBlur"/>
				</uni-forms-item>
				<uni-forms-item label="手机号码" required name="mobile">
					<uni-easyinput type="text" v-model="formData.mobile" placeholder="请输入手机号码" :inputBorder="false" @blur="onBlur"/>
				</uni-forms-item>
				<uni-forms-item label="电子邮箱" required name="email">
					<uni-easyinput type="text" v-model="formData.email" placeholder="请输入电子邮箱, 接收电子保单" :inputBorder="false"/>
				</uni-forms-item>
			</uni-card>
			
			<uni-section class="pub-title" title="被保险人信息" type="line"></uni-section>
			<uni-card class="box-shadow-10 card-pub">
				<uni-forms-item label="为谁投保">
					<picker id="weistb" @change="bindPickerChange" v-model="formData.weistb" :range="weistb">
						<view class="uni-input">{{weistb[index_weistb]}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="姓名" name="name2" required>
					<uni-easyinput type="text" v-model="formData.name2" placeholder="请输入姓名" :inputBorder="false"/>
				</uni-forms-item>
				<uni-forms-item label="证件类型">
					<picker id="zhengjlx2" @change="bindPickerChange" v-model="formData.zhengjlx2" :range="zhengjlx">
						<view class="uni-input">{{zhengjlx[index_zhengjlx2]}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="证件号码" required name="zhengjhm2">
					<uni-easyinput type="text" v-model="formData.zhengjhm2" placeholder="请输入证件号码" :inputBorder="false"/>
				</uni-forms-item>
				<uni-forms-item label="手机号码" required name="mobile2">
					<uni-easyinput type="text" v-model="formData.mobile2" placeholder="请输入手机号码" :inputBorder="false"/>
				</uni-forms-item>
				<!-- <uni-forms-item label="社保">
					<picker @change="bindPickerChange" v-model="formData.sheb" :range="sheb">
						<view class="uni-input">{{sheb[index]}}</view>
					</picker>
				</uni-forms-item> -->
			</uni-card>
			
			<uni-section class="pub-title" title="其它信息" type="line"></uni-section>
			<uni-card class="box-shadow-10 card-pub">
				<uni-forms-item label="生效日期">
					<!-- <uni-easyinput type="text" :value="shengxrq" :inputBorder="false" disabled /> -->
					<picker mode="date" @change="bindDateChange" class="ans-input pos-rel clearfix" :start="start" :end="end">
						<uni-easyinput type="text" :value="shengxrq" :inputBorder="false" disabled />
					</picker>
				</uni-forms-item>
				<uni-forms-item label="截止日期">
					<uni-easyinput type="text" :value="jiezrq" :inputBorder="false" disabled />
				</uni-forms-item>
			</uni-card>
			
			<uni-section class="pub-title" title="保险条款" type="line"></uni-section>
			<uni-card class="box-shadow-10 card-pub no-border">
				<uni-forms-item label="">
					<checkbox-group @change="checkbox_change">
						<checkbox class="fxl small-check" /><span class="fxl dis-block fs18">我已经阅读并同意</span>
						<view class="h30 clear wid100"></view>
						<view class="margin20L fontlink dis-block" v-for="(item, index) in baoxtkList" :key="item.id">
							<a class="margin20R" @click="openPdfDlg(item.tiaokurl)">{{item.tiaokmc}}</a> <span v-if="baoxtkList.length > index + 1">|</span>
						</view>
					</checkbox-group>
				</uni-forms-item>
			</uni-card>
			
			<view class="footer bg-white pad10 ">
				<view class="wid100 clearfix">
					<button class="orange-button rad50" @click="submitForm('form')">确认订单</button>
				</view>
			</view>
		</uni-forms>
	</view>
</template>
<script>
	import moment from "moment"
	import html2canvas from 'html2canvas';

	export default {
		data() {
			return {
				transRefId: null,
				kehs_uuid: null,
				start: moment().format("YYYY-MM-DD"),
				end: moment().add(15, 'days').format("YYYY-MM-DD"),
				baoxtkList: [],
				baofxg: null,
				agree: false,
				shengxrq: "",
				jiezrq: "",
				formData: {
					// name: "刘大海",
					// name2: "刘大海",
					// zhengjhm: "110224198205240053",
					// zhengjhm2: "110224198205240053",
					// mobile: "13911213254",
					// mobile2: "13911213254",
					// email: "1@2.com",
					// zhengjlx: "01",
					// zhengjlx2: "01",
					// weistb: "1"

					name: "",
					name2: "",
					zhengjhm: "",
					zhengjhm2: "",
					mobile: "",
					mobile2: "",
					email: "",
					zhengjlx: "01",
					zhengjlx2: "01",
					weistb: "1"
				},
				zhengjlx: ['身份证'],
				weistb: ['本人', '配偶', '子女', '父母'],
				sheb: ['有', '没有'],
				index_weistb: 0,
				index_zhengjlx: 0,
				index_zhengjlx2: 0,
				rules: {
					// 对name字段进行必填验证
					name: {
						// name 字段的校验规则
						rules:[
							// 校验 name 不能为空
							{
								required: true,
								message: '姓名必填',
							},
							// 对name字段进行长度验证
							{
								minLength: 2,
								maxLength: 5,
								message: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						label:'姓名'
					},
					zhengjhm: {
						rules:[
							{
								required: true,
								message: '证件号码必填',
							},
							{
								minLength: 18,
								maxLength: 18,
								message: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						label:'证件号码'
					},
					mobile: {
						rules:[
							{
								required: true,
								message: '{label}必填',
							},
							{
								minLength: 11,
								maxLength: 11,
								message: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						label:'手机号码'
					},
					email: {
						rules:[
							{
								format: "email"
							},
							{
								required: true,
								message: '{label}必填',
							}
						],
						label:'电子邮箱'
					},
					name2: {
						rules:[
							{
								required: true,
								message: '姓名必填',
							},
							{
								minLength: 2,
								maxLength: 5,
								message: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						label:'姓名'
					},
					zhengjhm2: {
						rules:[
							{
								required: true,
								message: '证件号码必填',
							},
							{
								minLength: 18,
								maxLength: 18,
								message: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						label:'证件号码'
					},
					mobile2: {
						rules:[
							{
								required: true,
								message: '{label}必填',
							},
							{
								minLength: 11,
								maxLength: 11,
								message: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						label:'手机号码'
					}
				}
			}
		},
		onLoad(option) {
			let that = this

			this.shengxrq = moment().add(1, 'days').format("YYYY-MM-DD") + " 00:00:00"
			this.jiezrq = moment().add(1, 'years').format("YYYY-MM-DD") + " 23:59:59"

			uni.getStorage({
				key: 'baofxg',
				success: function (res) {
					that.baofxg = res.data
				},
				fail(error) {
					console.log(error)
				}
			});

			uni.getStorage({
				key: 'kehs_uuid',
				success: function (res) {
					that.kehs_uuid = res.data
				},
				fail(error) {
					console.log(error)
				}
			});

			// alert(option.transRefId)
			
			if(option.transRefId)
				this.transRefId = option.transRefId
		},

		onReady() {
			let that = this
			
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
			// this.$refs.form.resetFields()

			uni.request({
				url: getApp().globalData.baseUrl + "/getBaoxtk",
				data: {
					chanpdm: that.baofxg.chanpCode
				},
				success: (res) => {
					if (res.data.success) {
						that.baoxtkList = res.data.result
					}
				}
			});
		},
		methods: {
			bindDateChange: function(e) {
				this.shengxrq = moment(e.target.value).add(1, 'days').format("YYYY-MM-DD") + " 00:00:00"
				this.jiezrq =  moment(e.target.value).add(1, 'years').format("YYYY-MM-DD") + " 23:59:59"
			},

			qingqcd() {
				let that = this
				let inputData = {
					uwMedicalId: that.transRefId,
					chanpName: that.baofxg.chanpName,
					chanpCode: that.baofxg.chanpCode,
					fangaCode: that.baofxg.fangaCode,
					toubrXm: that.formData.name,
					toubrSr: that.baofxg.birthday,
					toubrZjlx: that.formData.zhengjlx,
					toubrZjhm: that.formData.zhengjhm,
					toubrsj: that.formData.mobile,
					toubryx: that.formData.email,
					beibxrXm: that.formData.name2,
					beibxrSr: that.baofxg.birthday,
					beibxrZjlx: that.formData.zhengjlx2,
					beibxrZjhm: that.formData.zhengjhm2,
					beibxrsj: that.formData.mobile2,
					beibxrytbrgx: that.formData.weistb,
					shengxRq: that.shengxrq,
					jiezRq: that.jiezrq,
					fujxList: that.baofxg.fujxlb,
					baof: that.baofxg.baof,
					shifysb: that.baofxg.shifysb,
					agentCode: that.baofxg.agentCode,
					agentId: that.baofxg.agentId,
				}

				uni.showLoading({
					title: '请求出单...'
				});
				uni.request({
					url: getApp().globalData.baseUrl + "/qingqcd",
					data: inputData,
					success: (res) => {
						uni.hideLoading()

						if (res.data.success) {
							// inputData保存到order中供后面使用
							uni.setStorage({
								key: 'order',
								data: inputData,
								success: function () {
									uni.navigateTo({
										url: '../confirmOrder/confirmOrder?policy=' + JSON.stringify(res.data.result)
									});
								}
							});

						} else {
							uni.showModal({
								title: '提示',
								content: res.data.message,
								showCancel: false
							})
						}
					}
				});

			},

			baofjs: (_this) => {
				let that = _this

				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '保费计算...'
					});
					uni.request({
						url: getApp().globalData.baseUrl + "/baofjs",
						data: {
							transRefId: that.transRefId,
							chanpCode: that.baofxg.chanpCode,
							fangaCode: that.baofxg.fangaCode,
							toubrXm: that.formData.name,
							toubrSr: that.baofxg.birthday,
							toubrZjlx: that.formData.zhengjlx,
							toubrZjhm: that.formData.zhengjhm,
							beibxrXm: that.formData.name2,
							beibxrSr: that.baofxg.birthday,
							beibxrZjlx: that.formData.zhengjlx2,
							beibxrZjhm: that.formData.zhengjhm2,
							beibxrytbrgx: that.formData.weistb,
							shengxRq: that.shengxrq,
							jiezRq: that.jiezrq,
							fujxList: that.baofxg.fujxlb,
							email: that.formData.email,
							baof: that.baofxg.baof,
							shifysb: that.baofxg.shifysb,
							agentCode: that.baofxg.agentCode,
						},
						success: (res) => {
							uni.hideLoading()
							if (res.data.success) {
								resolve(true)

							} else {
								uni.showModal({
									title: '提示',
									content: res.data.message,
									showCancel: false
								})

								reject('error')
							}
						}
					});
				})

			},

			checkbox_change(e) {
				if(e.target.value.length == 1)
					this.agree = true
				else
					this.agree = false
			},

			onBlur() {
				this.formData.name2 = this.formData.name
				this.formData.zhengjhm2 = this.formData.zhengjhm
				this.formData.mobile2 = this.formData.mobile
			},

			openPdfDlg(pdfUrl) {
				location.href = pdfUrl
			},
			
			bindPickerChange: function(e) {
				// 为谁投保
				if(e.target.id == "weistb") {
					this.index_weistb = e.target.value

					// 本人
					if(e.target.value == 0) {
						this.formData.name2 = this.formData.name
						this.index_zhengjlx2 = this.index_zhengjlx
						this.formData.zhengjhm2 = this.formData.zhengjhm
						this.formData.mobile2 = this.formData.mobile

					} else {
						this.formData.name2 = ""
						this.formData.zhengjhm2 = ""
						this.formData.mobile2 = ""
					}
				}

				if(e.target.id == "zhengjlx") {
					if(e.target.value != 0)
						this.index_zhengjlx = e.target.value - 1
				}

				if(e.target.id == "zhengjlx2") {
					if(e.target.value != 0)
						this.index_zhengjlx2 = e.target.value - 1
				}
			},

			blobToDataURI(blob, callback) {
				var reader = new FileReader();
				reader.onload = function (e) {
					callback(e.target.result);
				}
				reader.readAsDataURL(blob);
			},
			
			submitForm: function(form) {
				let that = this

				that.$refs[form].submit().then(res => {
					console.log('表单的值：', res)
					if(!that.agree) {
						uni.showModal({
							title: '提示',
							content: "点击同意底部保险条款才能继续!",
							showCancel: false
						})

						uni.pageScrollTo({
							scrollTop: 999,
							duration: 300
						});
						
						return false
					}

					// 截屏传到后台
					html2canvas(document.body, {
						useCORS: true, 
						allowTaint: false, 
						windowWidth: document.body.scrollWidth, 
						windowHeight: document.body.scrollHeight,
						scale: 1}).then(function(canvas) {

						canvas.toBlob(function(blob) {
							that.blobToDataURI(blob, function (base64) {
								uni.request({
									url: getApp().globalData.baseUrl + "/kehsjl",
									method: "POST",
									data: {uuid: that.kehs_uuid, type: 2, jiep: "<img src=\"" + base64 + "\"/>"},
									success: (res) => {
										console.log(res)
									}
								})
							});
						});
					});

					that.baofjs(that).then(resp =>{
						if(resp) {
							// 请求出单
							that.qingqcd()
						}
						
					}).catch(error => {
						console.error(error)
					})
					
				}).catch(errors => {
					console.error('验证失败：', errors)
				})
			}
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}
</style>
